<script setup lang="ts">
import { userResetPwd } from '@/api/user'
import type { UserTable } from '@/types/user'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ref } from 'vue'

const props = defineProps<{
  dMap: Map<string, string>
  editData: UserTable
  // 刷新
  refresh: () => void
}>()

// 关闭
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()

const formRules = ref<FormRules<any>>({
  pwd: [
    {
      required: true,
      message: '请输入账号密码'
    },
    {
      max: 25,
      min: 8,
      message: '密码的长度应该为8-25个字符'
    }
  ]
})
const setPwd = ref({ id: props.editData.uId, pwd: '' })

// 表单dom
const elFormRef = ref<FormInstance>()
// 保存修改
function save() {
  elFormRef.value?.validate((d) => {
    if (d) {
      userResetPwd(setPwd.value.id!, setPwd.value.pwd)
        .then((d) => {
          ElMessage.success(d.msg)
          props.refresh()
          emit('cDlg')
        })
        .catch((d) => {
          ElMessage.error(d.msg)
        })
    }
  })
}
function cancel() {
  emit('cDlg')
}
</script>
<template>
  <el-form ref="elFormRef" :model="setPwd" label-width="100" :rules="formRules">
    <el-form-item :label="dMap.get('username') + '：'"
      ><span>{{ editData.username }}</span></el-form-item
    >
    <el-form-item label="新密码：" prop="pwd">
      <el-input v-model="setPwd.pwd" />
    </el-form-item>
    <div class="buttons">
      <el-button type="primary" @click="cancel">取消</el-button>
      <el-button type="success" @click="save">确认修改</el-button>
    </div>
  </el-form>
</template>
<style scoped>
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
